﻿<Page
    x:Class="WindowsStoreApp.MainPage"
    x:Name="me"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WindowsStoreApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
   
   <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width="140"/>
         <ColumnDefinition MaxWidth="400"/>
         <ColumnDefinition Width="100"/>
         <ColumnDefinition MaxWidth="650"/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="*"/>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <TextBlock Grid.Column="1" Grid.Row="0" Text="View" Style="{StaticResource HeaderTextStyle}"/>
      <ListBox Grid.Column="1" Grid.Row="1" Margin="0, 10, 0, 0" ItemsSource="{Binding ElementName=me, Path=View}">
         <ListBox.Resources>
            <Style TargetType="ListBoxItem">
               <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
         </ListBox.Resources>
         <ListBox.ItemTemplate>
            <DataTemplate>
               <Grid>
                  <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="1*"/>
                     <ColumnDefinition Width="2*"/>
                  </Grid.ColumnDefinitions>
                  <TextBlock Grid.Column="{Binding ElementName=me, Path=MakeColumn}" Text="{Binding Path=Make}" HorizontalAlignment="Center"/>
                  <TextBlock Grid.Column="{Binding ElementName=me, Path=ModelColumn}" Text="{Binding Path=Model}" HorizontalAlignment="Center"/>
               </Grid>
            </DataTemplate>
         </ListBox.ItemTemplate>
      </ListBox>
      <TextBlock Grid.Column="1" Grid.Row="2" Margin="0, 10, 0, 0" Text="Source" Style="{StaticResource HeaderTextStyle}"/>
      <ListBox Grid.Column="1" Grid.Row="3" Margin="0, 10, 0, 0" ItemsSource="{Binding ElementName=me, Path=Items}">
         <ListBox.Resources>
            <Style TargetType="ListBoxItem">
               <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
         </ListBox.Resources>
         <ListBox.ItemTemplate>
            <DataTemplate>
               <Grid>
                  <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="1*"/>
                     <ColumnDefinition Width="2*"/>
                  </Grid.ColumnDefinitions>
                  <TextBlock Grid.Column="{Binding ElementName=me, Path=MakeColumn}" Text="{Binding Path=Make}" HorizontalAlignment="Center"/>
                  <TextBlock Grid.Column="{Binding ElementName=me, Path=ModelColumn}" Text="{Binding Path=Model}" HorizontalAlignment="Center"/>
               </Grid>
            </DataTemplate>
         </ListBox.ItemTemplate>
      </ListBox>

      <StackPanel Grid.Column="3" Grid.RowSpan="4" HorizontalAlignment="Stretch" Orientation="Vertical">
         <TextBlock Text="Sort" Style="{StaticResource HeaderTextStyle}"/>
         <StackPanel Margin="0, 15, 0, 0" Orientation="Horizontal">
            <Button Content="Make" Click="OnSortMakeButtonClick"/>
            <Button Content="Model" Margin="10, 0, 0, 0" Click="OnSortModelButtonClick"/>
         </StackPanel>

         <TextBlock Margin="0, 50, 0, 0" Text="Filter" Style="{StaticResource HeaderTextStyle}"/>
         <Grid Margin="0, 15, 0, 0">
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="*"/>
               <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBox x:Name="txtFilter"/>
            <Button Grid.Column="1" Content="Apply" Margin="10, 0, 0, 0" Click="OnFilterButtonClick"/>
         </Grid>

         <TextBlock Margin="0, 50, 0, 0" Text="Source (Add)" Style="{StaticResource HeaderTextStyle}"/>
         <Grid Margin="0, 15, 0, 0">
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="Auto"/>
               <ColumnDefinition Width="2*"/>
               <ColumnDefinition Width="Auto"/>
               <ColumnDefinition Width="2*"/>
               <ColumnDefinition Width="Auto"/>
               <ColumnDefinition Width="1*"/>
               <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="Make:" Style="{StaticResource BodyTextStyle}"/>
            <TextBox Grid.Column="1" x:Name="txtMake" Margin="5, 0, 0, 0"/>
            <TextBlock Grid.Column="2" Text="Model:" Margin="15, 0, 0, 0" Style="{StaticResource BodyTextStyle}"/>
            <TextBox Grid.Column="3" x:Name="txtModel" Margin="5, 0, 0, 0"/>
            <TextBlock Grid.Column="4" Text="Index:" Margin="15, 0, 0, 0" Style="{StaticResource BodyTextStyle}"/>
            <TextBox Grid.Column="5" x:Name="txtIndex" Margin="5, 0, 0, 0"/>
            <Button Grid.Column="6" Content="Add" Margin="10, 0, 0, 0" Click="OnAddButtonClick"/>
         </Grid>

         <TextBlock Margin="0, 50, 0, 0" Text="Source (Clear)" Style="{StaticResource HeaderTextStyle}"/>
         <StackPanel Margin="0, 15, 0, 0" Orientation="Horizontal">
            <Button Content="Clear" Click="OnClearButtonClick"/>
         </StackPanel>
      </StackPanel>
   </Grid>
</Page>
